// 封装获取元素函数
function $(el){
   return document.querySelector(el)
}
var con = $('.con')
con.innerHTML = data.map(function(item){
    return `<ul class="content">
                <li>${item.consignee }</li>
                <li>${item.area}</li>
                <li>${item.address}</li>
                <li>${item.zipCode}</li>
                <li>${item.tel}</li>
                <li><span class='active'>移动</span>|<span class='remove'>删除</span></li>
                <li><p>设置中</p></li>
            </ul>`
}).join('')
p1= [...con.querySelectorAll('p')]
p1[0].classList.add('show')
p1[0].innerHTML = '设为默认'
// 给新增添加点击事件
$('.add').onclick = function(){
    // 设置弹窗
    var newDiv = document.createElement('div')
    newDiv.innerHTML = `<div class="new1 no">×</div>
                        <div class="set">
                            <p><span>收货人：</span><input type="text" class='name'></p>
                            <p><span>邮编：</span><input type="text" class='youbian'></p>
                            <p><span>所在地区</span><input type="text" class='add1'></p>
                            <p><span>电话：</span><input type="text" class='tel'></p>
                            <p><span>详细地址：</span><input type="text" class='add2'></p>
                            <button class="no">取消</button><button class="ok">提交</button>
                        </div>`
    newDiv.classList.add('new')
    document.body.appendChild(newDiv)
    // 点击取消时让遮罩消失
    var no = [...document.querySelectorAll('.no')]
    no.map(function(item){
        item.onclick = function(){
            newDiv.remove()
        }
    })
    // 判断输入框内容
    $('.ok').onclick = function(){
        var input = [...newDiv.getElementsByTagName('input')]
        input.map(function(obj){
            // console.log(obj)
            if(obj.value.trim()==='' ) return  alert('用户信息不能为空')
        })
        if($('.youbian').value.trim().length < 6 || isNaN($('.youbian').value.trim()))return alert('请输入6位纯数字')
        if($('.tel').value.trim().length < 11 || isNaN($('.tel').value.trim())){
            return alert('请输入11位纯数字')
        }else {
            // 条件符合时将内容添加至页面并关闭遮盖
            var name = $('.name').value.trim()
            var youbian = $('.youbian').value.trim()
            var add1 = $('.add1').value.trim()
            var add2 = $('.add2').value.trim()
            var tel = $('.tel').value.trim()
            // 创建一个新的ul并将其添加至 con 中
            var ul = document.createElement('ul')
            ul.innerHTML = ` 
                            <li>${name}</li>
                            <li>${youbian}</li>
                            <li>${add1}</li>
                            <li>${add2}</li>
                            <li>${tel}</li>
                            <li><span class='active'>移动</span>|<span class='remove'>删除</span></li>
                            <li><p>设置中</p></li>`
            ul.classList.add('content')
            $('.con').appendChild(ul) 
            newDiv.remove()   
        }   
    }
}
// 给内容添加点击事件
con.addEventListener('click',function(e){
    var target = e.target;
    let uls = [...con.querySelectorAll('ul')]
    let p = [...con.querySelectorAll('p')]
    p.forEach(function(item){return item.classList.remove('show')})
    if(target.nodeName === 'SPAN'){
        if(target.classList.contains('remove')){
            target.parentNode.parentNode.remove()
        }else if(target.classList.contains('active')){
            target.parentNode.nextElementSibling.firstElementChild.classList.add('show')
            target.parentNode.nextElementSibling.innerHTML = '设为默认'
            let ul = target.parentNode.parentNode.cloneNode(true)
            con.insertBefore(ul,uls[0])
            target.parentNode.parentNode.remove()
        }
    }else if(target.nodeName === 'P'){
        target.innerHTML = '设为默认'
        target.classList.add('show')
        let ul = target.parentNode.parentNode.cloneNode(true) 
        con.insertBefore(ul,uls[0])
        target.parentNode.parentNode.remove()
    }
})


